<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <header class="header center clearfix">
            <nav class="menu clearfix">
                <ul>
                    <li class="subList">
                        Opcion 1
                        <?php /* this comment wont be included on the html code output, copy this feature to improve another submenu list */ ?>
                        <ul class="subMenu" style="display: none">
                            <li>Sub Option 1</li>
                            <li>Sub Option 2</li>
                            <li>Sub Option 3</li>
                        </ul>
                    </li>
                    <li>Opcion 2</li>
                    <li>Opcion 3</li>
                    <li>Opcion 4</li>
                    <li>Opcion 5</li>
                </ul>
            </nav>
        </header>
        <div class="content center clearfix">
            <nav class="navigation">
                <a class="buttonOne" href="#"></a>
                <a class="buttonTwo" href="#"></a>
                <a class="buttonThree" href="#"></a>
                <a class="buttonFour" href="#"></a>
            </nav>
            <div class="wrapperInfo wrapperInfoBlack">
                <?php /* to add another page content, copy the all html, but replace the code between this comment and the end comment */?>
                <div class="logo"></div>
                <div class="contentButtonOne" style="display:none">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices porttitor arcu, ac varius enim consectetur sed. Cras leo libero, varius at sodales in, accumsan porta urna. Quisque blandit vestibulum semper. Proin dapibus ornare felis in aliquam. Duis risus leo, sodales et dictum et, faucibus aliquet nisi. Integer adipiscing, nisi et blandit egestas, turpis mi bibendum tortor, sit amet vestibulum enim neque non magna. Sed iaculis sagittis magna, vitae auctor leo semper eu. Curabitur condimentum libero vitae massa luctus placerat. Nunc orci sapien, hendrerit ac consectetur id, varius vel ligula. Donec eu neque quis neque vehicula tristique. Fusce et sapien erat, vel venenatis ante.
                    </p>
                </div>
                <div class="contentButtonTwo" style="display:none">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices porttitor arcu, ac varius enim consectetur sed. Cras leo libero, varius at sodales in, accumsan porta urna. Quisque blandit vestibulum semper. Proin dapibus ornare felis in aliquam. Duis risus leo, sodales et dictum et, faucibus aliquet nisi. Integer adipiscing, nisi et blandit egestas, turpis mi bibendum tortor, sit amet vestibulum enim neque non magna. Sed iaculis sagittis magna, vitae auctor leo semper eu. Curabitur condimentum libero vitae massa luctus placerat. Nunc orci sapien, hendrerit ac consectetur id, varius vel ligula. Donec eu neque quis neque vehicula tristique. Fusce et sapien erat, vel venenatis ante.
                    </p>
                </div>
                <div class="contentButtonThree" style="display:none">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices porttitor arcu, ac varius enim consectetur sed. Cras leo libero, varius at sodales in, accumsan porta urna. Quisque blandit vestibulum semper. Proin dapibus ornare felis in aliquam. Duis risus leo, sodales et dictum et, faucibus aliquet nisi. Integer adipiscing, nisi et blandit egestas, turpis mi bibendum tortor, sit amet vestibulum enim neque non magna. Sed iaculis sagittis magna, vitae auctor leo semper eu. Curabitur condimentum libero vitae massa luctus placerat. Nunc orci sapien, hendrerit ac consectetur id, varius vel ligula. Donec eu neque quis neque vehicula tristique. Fusce et sapien erat, vel venenatis ante.
                    </p>
                </div>
                <div class="contentButtonFour" style="display:none">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices porttitor arcu, ac varius enim consectetur sed. Cras leo libero, varius at sodales in, accumsan porta urna. Quisque blandit vestibulum semper. Proin dapibus ornare felis in aliquam. Duis risus leo, sodales et dictum et, faucibus aliquet nisi. Integer adipiscing, nisi et blandit egestas, turpis mi bibendum tortor, sit amet vestibulum enim neque non magna. Sed iaculis sagittis magna, vitae auctor leo semper eu. Curabitur condimentum libero vitae massa luctus placerat. Nunc orci sapien, hendrerit ac consectetur id, varius vel ligula. Donec eu neque quis neque vehicula tristique. Fusce et sapien erat, vel venenatis ante.
                    </p>
                </div>
            </div>
        </div>
        <footer class="footer center clearfix">
            <div class="info">
                <div>P. Dutto 2381</div>
                <div>(7600) Mar del Plata</div>
                <div>Buenos Aires, Argentina</div>
                <div class="skype">Ingenieria.Predictiva</div>
                <div>info@ingenieriapredictiva.com</div>
            </div>
        </footer>

        
        <script src="js/vendor/jquery-1.9.0.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>
        <script type="text/javascript">
            $('.buttonOne').mouseenter(function()
                {
                    $('.logo').hide();
                    $('.wrapperInfo').removeClass('wrapperInfoBlack');
                    $('.contentButtonOne').fadeIn(500);
                }
            );

        $('.buttonOne').mouseleave(function()
                {
                    $('.contentButtonOne').hide();
                    $('.wrapperInfo').addClass('wrapperInfoBlack');
                    $('.logo').fadeIn(500);
                }
            );

        $('.buttonTwo').mouseenter(function()
                {
                    $('.logo').hide();
                    $('.wrapperInfo').removeClass('wrapperInfoBlack');
                    $('.contentButtonTwo').fadeIn(500);
                }
            );

        $('.buttonTwo').mouseleave(function()
                {
                    $('.contentButtonTwo').hide();
                    $('.wrapperInfo').addClass('wrapperInfoBlack');
                    $('.logo').fadeIn(500);
                }
            );

        $('.buttonThree').mouseenter(function()
                {
                    $('.logo').hide();
                    $('.wrapperInfo').removeClass('wrapperInfoBlack');                    
                    $('.contentButtonThree').fadeIn(500);
                }
            );

        $('.buttonThree').mouseleave(function()
                {
                    $('.contentButtonThree').hide();
                    $('.wrapperInfo').addClass('wrapperInfoBlack');
                    $('.logo').fadeIn(500);
                }
            );

        $('.buttonFour').mouseenter(function()
                {
                    $('.logo').hide();
                    $('.wrapperInfo').removeClass('wrapperInfoBlack');
                    $('.contentButtonFour').fadeIn(500);
                }
            );

        $('.buttonFour').mouseleave(function()
                {
                    $('.contentButtonFour').hide();
                    $('.wrapperInfo').addClass('wrapperInfoBlack');
                    $('.logo').fadeIn(500);
                }
            );
        </script>

        
    </body>
</html>
